<template>
	<view>
		<view class="d-flex border-top border-bottom a-center  bg-white" style="height: 44px;z-index: 100;">
			<view class="flex-1 d-flex a-center  j-center font-md" v-for="(item,index) in screen.list" :key="index"
				@tap="changeScreen(index)">
				<text :class="screen.currentIndex === index ? 'text-warning' : 'text-muted'">{{item.name}}</text>
				<view v-if="item.isSingle=='n'">
					<view class="iconfont icon-paixu-shengxu line-h0"
						:class="item.status===1?'text-warning':'text-light-muted'">
					</view>
					<view class="iconfont icon-paixu-jiangxu line-h0"
						:class="item.status===2?'text-warning':'text-light-muted'">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['screen'],
		methods: {
			changeScreen(index) {
				// 判断当前点击是否已经是激活状态
				let oldIndex = this.screen.currentIndex
				let oldItem = this.screen.list[oldIndex]
				if (oldIndex === index) {
					oldItem.status = oldItem.status === 1 ? 2 : 1;
					this.$emit('loadData', index);
					return
				}
				let newIitem = this.screen.list[index]
				// 移除旧激活状态
				oldItem.status = 0
				this.screen.currentIndex = index
				// 增加新激活状态
				newIitem.status = 1

				// 加载数据
				this.$emit('loadData', index);
			}
		}
	}
</script>

<style lang="scss" scoped> 
    /* 自定义图标库 */
	@import "/common/icon.css";
	
	@import '@/common/zcm-main.css';
	@import '/static/css/base.css';
</style>
